<template>
    <div class="mui-content">
        <!-- 商品列表 -->
        <div class="mui-card" v-for="(item,i) in goods">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <!-- 绑定默认状态 ，当值发生改变时保存到vux在保存到本地存储-->
                    <mt-switch v-model="$store.state.car[i].goodsSelected" @change="changeSelected(item.id,$store.state.car[i].goodsSelected)"></mt-switch>
                    <img :src="item.images[0]">
                    <div class="info">
                        <p class="content">{{item.content}}</p>
                        <p>￥<span class="price">{{item.market_price*$store.getters.postCountAndId[item.id]}}</span>
                        <!-- 要想初始化数字框中的数字,在vuex中getters中新建一个对象,id作为键,个数作为值,传到shopcarnumber组件中去 -->
                        <!-- 传过去的是一个数，值不是数组，刚好商品的id和vuex中id值是一样的， -->
                        <shopcarnumber :initCount="$store.getters.postCountAndId[item.id]" :goodsid="item.id"></shopcarnumber>
                        <!-- 删除就是调用vuex中的Mutations的事件 -->
                        <a href="#" @click.prevent="delGoods(item.id,i)">删除</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 结算 -->
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <div class="pay">
                        <!-- 总价调用vuex的监听事件getters新建对象中的, -->
                        <p>总计（不含运费）</p>
                        <p>已勾选商品<span class="pay_red">{{$store.getters.getPriceSum.count}}</span>件，总价￥<span class="pay_red">{{$store.getters.getPriceSum.price}}</span>元</p>
                    </div>
                    <mt-button type="danger">结算</mt-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import shopcarnumber from '../subcomponents/Shopcar_input.vue'
export default{
    data(){
        return {
            // 所有商品的信息
         goods:[],
         // 得到已添加到购物车中的信息的id值
         arrId:[],
        }
    },
    created(){
            this.getGoods()
            this.getGoodsList()
        },
    methods:{
            getGoodsList(){
                this.$http.get('http://localhost:3000/data').then(ret=>{
                    // 遍历得到每一项的id值
                    for (var i = 0; i < this.arrId.length; i++) {
                        this.goods.push(ret.body[this.arrId[i]-1])
                    }
                })
            },
            getGoods(){
                var car =this.$store.state.car
                // 遍历得到每一项的id值
                car.forEach(item=>{
                    this.arrId.push(item.goodsId)
                })
            },
            delGoods(id,i){
                // 先在购物车本页面中删掉goods的那一项，再删除vuex中的
                this.goods.splice(i,1)
                this.$store.commit('delGoods',id)
            },
            changeSelected(id,flag){
                this.$store.commit('updateSelected',{
                    id:id,
                    flag:flag
                })
            }
    },
    components:{
        shopcarnumber
    }
}
</script>

<style scoped lang="scss">
img{
    width: 50px;
    height: 50px;
}
.mui-card-content-inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    .info{
        .content{
            margin-bottom: 0px;
            color: #000;
            font-weight: bolder;
        }
        .price{
            color: red;
            font-size: 16px;
            font-weight: bolder;
        }
    }
    .pay_red{
        color: red;
        font-size: 16px;
        font-weight: bolder;
    }
}
</style>